﻿@page "/icon"
@page "/docs/guides/components/icon.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Icon
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>Icon</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase icon rendering using the embedded Material Symbols Outlined font (2,500+ glyphs), custom icon colors with <code>IconColor</code> property, filled icon variants using CSS font-variation-settings, styled icons with theme-defined <code>IconStyle</code>, and integration with other icon fonts like Material Symbols Rounded and FontAwesome by setting the <code>--rz-icon-font-family</code> CSS variable.
</RadzenText>

<RadzenText Anchor="icon#material-icons" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Material Icons
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    By default, the <code>RadzenIcon</code> component uses the embedded in Radzen Blazor Components <code>MaterialSymbolsOutlined.woff2</code> font containing more than 2,500 glyphs. <RadzenLink Path="https://fonts.google.com/icons?icon.set=Material+Symbols" Text="See all Material Symbols ↗" target="_blank"/>
</RadzenText>
<RadzenExample ComponentName="Icon" Example="IconMaterial">
    <IconMaterial />
</RadzenExample>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mt-8">
    <RadzenLink Path="https://fonts.google.com/icons?icon.set=Material+Symbols" Text="See all Material Symbols" target="_blank"/>
</RadzenText>

<RadzenText Anchor="icon#icon-color" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Icon color
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>IconColor</code> property to set custom icon foreground color.
</RadzenText>
<RadzenExample ComponentName="Icon" Example="IconColor">
    <IconColor />
</RadzenExample>

<RadzenText Anchor="icon#filled-icons" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Filled icons
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>font-variation-settings</code> CSS property for filled icons with the Material Symbols font. Note that some icons cannot be filled because they lack elements that allow for filling.
</RadzenText>
<RadzenExample ComponentName="Icon" Example="IconFilled">
    <IconFilled />
</RadzenExample>

<RadzenText Anchor="icon#styled-icons" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Styled icons
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1"class="rz-mb-8">
    Use <code>IconStyle</code> property to modify the icons foreground color. It offers the standard styles defined by the theme.
</RadzenText>
<RadzenExample ComponentName="Icon" Example="IconStyles">
    <IconStyles />
</RadzenExample>

<RadzenText Anchor="icon#icons-width-other-fonts" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Using RadzenIcon with other icon fonts
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
    You can use any icon font supporting ligatures with the <code>RadzenIcon</code> component. To do so, you need to load the font file using the CSS <code>@@font-face</code> at-rule and set the corresponding font-family name to the <code>--rz-icon-font-family</code> CSS variable. The example below uses Material Symbols Rounded font.
</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" class="rz-pt-8">
    RadzenIcon with Material Symbols Rounded font
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Material Symbols and Material Symbols Rounded are variable fonts containing multiple stylistic variations e.g. you can control the boldness of the icon using the <code>font-weight:</code> CSS property.
</RadzenText>
<RadzenExample ComponentName="Icon" Example="MaterialRoundedIconFonts">
    <MaterialRoundedIconFonts />
</RadzenExample>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mt-8">
    Read more about <RadzenLink Path="https://fonts.google.com/knowledge/glossary/variable_fonts" Text="variable fonts" target="_blank" />.
</RadzenText>

<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" class="rz-pt-8 rz-mb-8">
    RadzenIcon with Material Symbols font loaded from Google Fonts.
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    For full control over the icon font content and styles, you can load the Material Symbols font from Google Fonts and set the <code>--rz-icon-font-family</code> CSS variable accordingly.
</RadzenText>
<RadzenExample ComponentName="Icon" Example="GoogleFontsMaterialSymbols">
    <GoogleFontsMaterialSymbols />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" class="rz-pt-8 rz-mb-8">
    RadzenIcon with FontAwesome font
</RadzenText>
<RadzenExample ComponentName="Icon" Example="FontAwesomeIconFonts">
    <FontAwesomeIconFonts />
</RadzenExample>
